<template>
    <div id="details">
        <!-- 轮播图 -->
        <div class="merimg">
            <div class="swiper-container  swiper-container8">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" v-for="mersdetaile in mersdetailes" :key="mersdetaile.id">
                        <img :src="apiUrl+'/'+mersdetaile.mersdImg" >
                    </div>
                </div>
            </div>
        </div>
        <!-- 商品名称和价格 -->
        <div class="mercontent">
            <div class="mertitle">都乐帝王香蕉约700g</div>
            <div class="merprice">
                <span class="merprices">
                    <span class="mersign">￥</span>7.9
                </span>
                <div class="gocart">加入购物车</div>
            </div>
        </div>
        <!-- 模块间的间隙 -->
        <div class="merhr"></div>
        <!-- 价格介绍 -->
        <div class="priceIntr">
            <div class="priceIntrs">价格说明</div>
            <div class="oprice">
                <b>划线价格：</b> <span>划线的价格并非《中华人民共和国价格法》及《禁止价格欺诈行为的规定》等相关法律法规中所指商品“原价”的含义，仅为到家平台商家处商品的供应商指导价或建议零售价，</span> <b>并非商品原价。</b>
            </div>
            <div class="nprice">
                <b>未划线价格：</b><span>未划线的价格指该商家处商品在京东到家平台实时标价，具体成交价格根据商品参加的活动，或者您使用优惠券等发生变化，最终以订单结算页面价格为准。</span>
            </div>
        </div>
        <!-- 模块间的间隙 -->
        <div class="merhr"></div>
        <!-- 类似商品的轮播图 -->
        <div class="mersame">
            <div class="mersameContent">也许你还喜欢</div>
            <div class="swiper-container  swiper-container9">
                <div class="swiper-wrapper">
                    <div class="swiper-slide" >
                        <div class="mersamech">
                            <ul class="mersamechs">
                                <li v-for="mersamekk in mersameks" :key="'mm_'+mersamekk.id">
                                    <img :src="apiUrl+'/'+mersamekk.mskImg">
                                    <p class="mersamechtt">{{mersamekk.mName}}</p>
                                    <p class="mersamechn">
                                       <span>{{mersamekk.nprice}}</span>
                                       <span class="mersadd">+</span>
                                    </p>
                                    <s class="mersamecho">{{mersamekk.oprice}}</s>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>     
            </div>
        </div>
        <!-- 模块间的间隙 -->
        <div class="merhr1"></div>
        <!-- 右侧导航 -->
        <rnav active="shop"></rnav>
        <!-- 底部购物车 -->
        <Car active="merdetails"></Car>
    </div>
</template>
<script>
import rnav from "@/components/Rnav.vue";
import Car from "@/components/Car.vue";
import $ from "jquery";

$(function() {
  let swiper = new Swiper(".swiper-container8", {
    autoplay: 2000,
    loop: true,
  });

   let swiper1 = new Swiper(".swiper-container9", {
    pagination: ".swiper-pagination",
    loop: true,
    autoplay: 2000,
  });
});
export default {
    props: ["shopid"],
    components:{
        Car,
        rnav,
    },
    data(){
        return{
            mersdetailes:[],
            mersameks:[]
        }
    },
    created(){
        this.getMerDetails();
    },
    methods:{
        getMerDetails() {
            this.axios.get("/mersdetaile/list").then(res => {
                if (res.data.error == 0) {
                this.mersdetailes = res.data.data0;
                this.mersameks = res.data.data1;
                }
             });
        },
    }
}
</script>
<style>
#details .merimg{
    width:100%;
    height: auto;
    /* border:1px solid #333; */
}
#details .merimg img{
    width:20rem;
    height: 20rem;
}
#details .mercontent{
    width:100%;
    height: auto;
}
#details .mertitle{
    height: 2.6rem;
    text-align: center;
}
#details .merprice{
    height: 3.5rem;
    display: flex;
    justify-content: space-between;
    padding: 0 0.5rem;
}
#details .merprices{
    color:red;
    font-weight: 900;
    font-size: 1.2rem;
}
#details .mersign{
    font-size: 0.8rem;
}
#details .gocart{
    background-color: rgb(12, 218, 91);
    width:5.6rem;
    height: 2rem;
    line-height: 2rem;
    text-align: center;
    color:white;
    font-size: 0.8rem;
    border-radius: 0.2rem;
}
#details .merhr{
    width:20rem;
    height: 0.5rem;
    background-color: #f4f4f4;
}
#details .merhr1{
    width:20rem;
    height: 4rem;
    background-color: #f4f4f4;
}
#details .priceIntr{
    width:20rem;
    height: auto;
}
#details .priceIntrs{
    height:2.6rem;
    line-height: 2.6rem;
    padding:0 0.5rem;
    font-size: 0.9rem;
}
#details .oprice{
    font-size: 0.78rem;
    margin-bottom: 0.8rem;
    padding:0 0.5rem;
}
#details .nprice{
    font-size: 0.78rem;
    margin-bottom: 0.5rem;
    padding:0 0.5rem;
}
#details .oprice span{
    color:#666;
}
#details .nprice span{
    color:#666;
}
#details .mersame{
 width: 20rem;
 height: auto;
}
#details .mersameContent{
    height: 2.6rem;
    line-height: 2.6rem;
    padding:0 0.5rem;
    font-size: 0.9rem;
}
#details .mersamech{
    width:20rem;
    height:auto;
    padding:0 0.5rem;
}
#details .mersamechs{
    list-style-type: none;
    display:flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#details .mersamechs li{
    height: 12rem;
}
#details .mersamech img{
    width:5.8rem;
    height: 5.8rem;
}
#details .mersamechtt{
    width:5.8rem;
    font-size: 0.8rem;
}
.mersamechn{
    width:5.8rem;
    color:red;
    font-size: 0.7rem;
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
}
.mersadd{
    display: block;
    width:1.1rem;
    height: 1.1rem;
    line-height: 1rem;
    text-align: center;
    background-color: rgba(5, 179, 42, 0.815);
    color:white;
    border-radius: 1.1rem;
}
.mersamecho{
    font-size: 0.7rem;
    color:#999;
}
</style>


